import React, {PureComponent} from "react"
import {bindActionCreators} from "redux"
import {connect} from "react-redux"
import { cloneDeep} from "lodash";
/*ant 组件*/
import {Timeline,Input,Button,Icon} from "antd"
import OrganizeSetting from "./organizeSetting";
import {changeOrganize} from "../actions";
/*css依赖*/
import "./organize.less"
/*redux连接池*/
@connect(
    ({base}) => ({
        organizes:base.organizes,
        adding:base.adding,
        allPerson:base.allPerson,
    }),
    (dispatch) => (
        bindActionCreators({
            changeOrganize,
        }, dispatch)
    )
)
export default class Index extends PureComponent {
    state = {
        showAddingSetting:false,//打开人员编辑界面
        addingSetting:{},//存储编辑信息
    }
    render() {
        const {organizes,adding} = this.props;
        const {addingSetting,showAddingSetting} = this.state;
        return (
            <div className="organize">
                <div className="organize-main">
                    <p><span>主部门</span></p>
                    <Input className="organize-input organize-main-input"
                           onFocus={()=>{this.showAddingSetting(organizes)}}
                           onChange={()=>{}}
                           value={organizes.name}/>
                    {
                        !adding && <Button className="organize-add" onClick={()=>{this.add({
                            name:organizes.name,
                            show:true,//展开收起
                            layer:1
                        })}}><Icon type="plus" />子部门</Button>
                    }
                </div>
                <div className="organize-line">
                    {
                        this.createChildren(organizes.children)
                    }
                </div>
                {
                    showAddingSetting &&   <OrganizeSetting
                        close = {this.close}
                        info = {addingSetting}
                        person={this.getCurrentPerson()}
                        admin={this.getCurrentAdmin()}
                    />
                }
            </div>
        )
    }

    /**
     * 获取当前部门人员
     */
    getCurrentPerson=()=>{
        let {addingSetting} = this.state;
        let {allPerson} = this.props;
        return allPerson.filter(i=>{
            return i.assess == addingSetting.id
        });
    };
    /**
     * 获取当前部门管理员
     */
    getCurrentAdmin = ()=>{
        let {addingSetting} = this.state;
        let {allPerson} = this.props;
        return allPerson.filter(i=>{
            return i.manager == addingSetting.id
        })
    }
    createChildren = (items = [])=>{
        let {adding} = this.props;
        let newChildren = cloneDeep(items);
        if(!!items.length){
            newChildren.unshift({
                name:"",
                show:false,
                children:[],
            });
        }
        return (<Timeline>
            {
                newChildren.map((item,index)=>{
                    return (<Timeline.Item key={item.name+index}>
                        {
                            (item.name || item.new) &&  <div className="organize-sub">
                                <div className="organize-sub-input">
                                    { //正在新增隐藏新增按钮
                                        !adding && <Button onClick={()=>{this.add(item)}} className="organize-add" ><Icon type="plus" />子部门</Button>
                                    }
                                    <div className="organize-sub-input-line">
                                        <span></span>
                                    </div>
                                    <Input
                                        disabled={adding&&!item.new}
                                        className="organize-input"
                                        onBlur={(e)=>{this.check(e,item)}}
                                        onFocus={()=>{this.showAddingSetting(item)}}
                                        defaultValue={item.name}/>
                                </div>
                                {
                                    (!!item.children.length && item.show) && this.createChildren(item.children)
                                }
                                {
                                    (!!item.children.length && item.layer>=3) && <p className="organize-sub-action" onClick={()=>{this.change(Object.assign(item,{show:!item.show}))}}>
                                        {item.show && <span><Icon type="right" /> 收起</span> || <span><Icon type="up" /> 展开({item.children.length})</span>}
                                    </p>
                                }
                            </div>
                        }
                    </Timeline.Item>)
                })
            }
        </Timeline>);
    }
    /**
     * 修改状态
     * @param status
     * @param type 1 不修改名称 2 移除 3 修改名称
     */
    change = (status,type=1)=>{
        let {organizes,changeOrganize,adding} = this.props;
        let newItems = cloneDeep(organizes);
        function changeStatus(items){
            for(let x in items){
                if(!adding && 1 === type && items[x].name === status.name && items[x].layer === status.layer){
                    items[x] = status;
                }
                if(3 === type && items[x].new){
                    items[x] = status;
                }
                if(2 === type && items[x].new){
                    items.shift();
                    break;
                }
                if(items[x].children.length){
                    changeStatus(items[x].children)
                }
            }
            return items;
        }
        changeStatus(newItems.children);
        changeOrganize({
            organizes:newItems,
            adding:(3 === type || 2 === type)?false:adding
        });
    };
    /**
     * 检测名称是否重复
     * @param e
     * @param item
     */
    check =(e,item)=>{
        let name = e.target.value;
        if(!!name.length && !this.checkName(name)){//有输入内容 修改该条目状态
            item.name = name;
            delete item.new;
            this.change(item,3)
        }else {//没有数据移除该条目
            this.change(item,2)
        }
    };
    add = (status)=>{
        let {organizes,changeOrganize,adding} = this.props;
        if(adding)
            return false;
        let newItems = cloneDeep(organizes);
        function changeStatus(items){
            for(let x in items){
                if(items[x].layer === status.layer && status.name === items[x].name){
                    items[x].show = true;
                    items[x].children.unshift({
                        name:"",
                        show:true,
                        new:true,
                        id:(new Date()).getTime(),
                        layer:items[x].layer+1,
                        children:[],
                    });
                }
                if(items[x].children.length){
                    changeStatus(items[x].children)
                }
            }
            return items;
        }
        if(1 === status.layer){
            newItems.children.unshift({
                name:"",
                show:true,
                new:true,
                layer:2,
                id:(new Date()).getTime(),
                children:[],
            })
        }else {
            changeStatus(newItems.children);
        }
        changeOrganize({
            organizes:newItems,
            adding:true
        });
    };
    /**
     * 检测重名
     * @param name
     * @returns {boolean}
     */
    checkName = (name)=>{
        let {organizes} = this.props;
        let flag = false;
        if(name === organizes.name){
            return true;
        }
        function changeStatus(items){
            for(let x in items){
                if(items[x].name === name){
                    flag = true;
                    return false;
                }
                if(!!items[x].children.length){
                    changeStatus(items[x].children);
                }
            }
            return items;
        }
        changeStatus(organizes.children);
        return flag;
    };
    showAddingSetting=(item)=>{
        let {adding} = this.props;
        if(adding){
            return false;
        }
        this.setState({
            addingSetting:item,
            showAddingSetting:true
        })
    };
    close = ()=>{
        this.setState({
            showAddingSetting:false
        })
    }
    componentDidMount() {
    }
}
